<template>
	<view class="datamodule">
		<view class="datadate">
			<view class="content_date">
				<view class="date_title">
					<view><text class="bigText">总用户数</text>(拉新/转化)</view>
					<view><text class="bigText">{{res.new.num}}</text>/<text class="bigText">{{res.conversion.num}}</text>人</view>
					<view class="date_sw">
						<view :class="dateIndex==0?'target':''" @click="dateSw(0);">昨日</view>
						<view :class="dateIndex==1?'target':''" @click="dateSw(1);">近7日</view>
						<view :class="dateIndex==2?'target':''" @click="dateSw(2);">近30日</view>
					</view>
				</view>
				<view class="date_select">
					<picker mode="selector" :range="picker.pickerArr" @change="pickerSel($event)">
						<text>{{picker.pickerTarget}}</text>
						<image src="../../static/img/ic_pulldown.png"></image>
					</picker>
				</view>
			</view>
		</view>
		<!-- 用户模块 -->
		<view class="contentModule contentYh">
			<view class="module_list">
				<view class="module_listinc">
					<view class="module_listtop">
						<text>拉新</text>
					</view>
					<view class="jf_listcon">
						<view class="jf_totalNum">{{res.new.num}}<text>户</text></view>
						<view>
							<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
							<view v-if="res.new.flag==-1" class="greenfont displayinLine">
								<image src="../../static/img/ic_down.png"></image>
								{{res.new.d2d}}
							</view>
							<view v-else-if="res.new.flag==1" class="redfont displayinLine">
								<image src="../../static/img/icon_up.png"></image>
								{{res.new.d2d}}
							</view>
							<view v-else class="greyfont displayinLine">
								<text class="greyfont mgleft10">
									暂无变化
								</text>
							</view>
						</view>
						<view class="greyfont">注：用户扫描U品二维码并首次登录U品成功</view>
					</view>
				</view>
				<view class="module_listinc">
					<view class="module_listtop">
						<text>转化</text>
					</view>
					<view class="jf_listcon">
						<view class="jf_totalNum">{{res.conversion.num}}<text>户</text></view>
						<view>
							<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
							<view v-if="res.conversion.flag==-1" class="greenfont displayinLine">
								<image src="../../static/img/ic_down.png"></image>
								{{res.conversion.d2d}}
							</view>
							<view v-else-if="res.conversion.flag==1" class="redfont displayinLine">
								<image src="../../static/img/icon_up.png"></image>
								{{res.conversion.d2d}}
							</view>
							<view v-else class="greyfont displayinLine">
								<text class="greyfont mgleft10">
									暂无变化
								</text>
							</view>
						</view>
						<view class="greyfont">注：用户首次单笔实付金额≥5元</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "datamodule2",
		data() {
			return {
				dateIndex:0,
				picker:{ //选择器数据
					pickerArr:['全部数据','我的数据'],
					pickerTarget:'全部数据',
					checkType:1
				},
				timeStatus:{
					'0':'2',
					'1':'3',
					'2':'4'
				},
				flagNum:{ //与前几日对比的显示文字
					'0':'1',
					'1':'7',
					'2':'30'
				}
			};
		},
		props:{
			res:{
				"total_num": 0,
				"new": {
				  "num": 0,
				  "flag": 0,
				  "d2d": 0
				},
				"conversion": {
				  "num": 0,
				  "flag": 0,
				  "d2d": 0
				}
			}
		},
		methods:{
			pickerSel:function(e){
				this.picker.pickerTarget = this.picker.pickerArr[e.detail.value];
				this.picker.checkType = e.detail.value+1;
				this.refreshDataEmit();
			},
			dateSw:function(index){
				this.dateIndex = index;
				this.refreshDataEmit();
			},
			//刷新当前页面的数据
			refreshDataEmit:function(){
				this.$emit('refreshData',{
					type:'Yh',
					data:{
						data_type:5,
						check_type:this.picker.checkType, //全部/我的数据
						seachtime:this.timeStatus[this.dateIndex]  //时间
					}
				})
			}
		},
		components: {
		}
	}
</script>

<style lang="scss" scoped>
	@import './datamodule.scss';
	.content_date{
		justify-content: flex-end;
		align-items: flex-start;
		.date_title{
			text-align: center;
			margin-right: 10rpx;
			.bigText{
				font-size: 40rpx;
			}
		}
	}
</style>
